import Vue from 'vue'
import Vuesax from 'vuesax'
//import 'material-icons/iconfont/material-icons.css';
import 'vuesax/dist/vuesax.css' //Vuesax styles
Vue.use(Vuesax, {
  size: "mini"
})

const defaultOptions = {
  position: "top-center",
  progress: "auto",
  buttonClose: false,
  duration: 3000
}

let msg = function (opts) {
  Vue.prototype.$vs.notification({
    ...defaultOptions,
    ...opts
  })
}
msg.info = function (msg, opts){
  Vue.prototype.$vs.notification({
    ...defaultOptions,
    ...opts,
    color: "#ccc",
    icon: "<i class='iconfont icon-info'/>",
    text: msg
  })
}
msg.primary = function (msg, opts){
  Vue.prototype.$vs.notification({
    ...defaultOptions,
    ...opts,
    color: "primary",
    icon: "<i class='iconfont icon-success'/>",
    text: msg
  })
}
msg.warning = function (msg, opts) {
  Vue.prototype.$vs.notification({
    ...defaultOptions,
    ...opts,
    color: "warning",
    icon: "<i class='iconfont icon-warning'/>",
    text: msg
  })
}
msg.success = function (msg, opts){
  Vue.prototype.$vs.notification({
    ...defaultOptions,
    ...opts,
    color: "success",
    icon: "<i class='iconfont icon-success'/>",
    text: msg
  })
}
msg.danger = function (msg, opts){
  Vue.prototype.$vs.notification({
    ...defaultOptions,
    ...opts,
    color: "danger",
    icon: "<i class='iconfont icon-Danger'/>",
    text: msg
  })
}


Vue.prototype.$loading = function (options={}) {
  return Vue.prototype.$vs.loading({
    target: options.target || this.$el,
    scale: '1',
    opacity: 1,
    type: "scale",
    color: 'warning',
    ...options
  })
}
Vue.prototype.$msg = msg
